<template>
  <el-container>
    <el-header>
      <h2 class="title">设置表单</h2>
    </el-header>
    <el-main>
      <el-form ref="formRef" :model="form" label-width="120px">
        <el-form-item label="阴影渲染开关">
          <el-switch
            v-model="form.shadowRendering"
            active-text="开"
            inactive-text="关"
          />
        </el-form-item>
        <el-form-item label="抗锯齿级别">
          <el-select v-model="form.antiAliasing" placeholder="选择抗锯齿级别">
            <el-option label="2AA" value="2AA" />
            <el-option label="4AA" value="4AA" />
            <el-option label="8AA" value="8AA" />
            <el-option label="16AA" value="16AA" />
            <el-option label="FXAA" value="FXAA" />
          </el-select>
        </el-form-item>
        <el-form-item label="纹理加载方式">
          <el-select
            v-model="form.textureLoading"
            placeholder="选择纹理加载方式"
          >
            <el-option label="延迟加载" value="lazy" />
            <el-option label="预加载" value="preload" />
          </el-select>
        </el-form-item>
        <el-form-item label="垂直同步">
          <el-switch v-model="form.vSync" active-text="是" inactive-text="否" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

const form = ref({
  shadowRendering: true,
  antiAliasing: "2AA",
  textureLoading: "预加载",
  vSync: true
});

const save = () => {
  console.log("保存成功", form.value);
  ElMessage.success("保存成功");
};

const cancel = () => {
  console.log("已取消");
  ElMessage.warning("已取消");
};
</script>

<style scoped>
.el-container {
  margin: 20px;
}

.title {
  text-align: center;
}
</style>
